<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />

  <link rel="stylesheet" type="text/css" href="../node_modules/survey-core/survey-core.css" />
  <link rel="stylesheet" type="text/css" href="../node_modules/survey-creator-core/survey-creator-core.css" />
  <!-- <link rel="stylesheet" type="text/css" href="../build/survey-creator-js.min.css" /> -->
  <style>
        /*imitation of Tailwind CSS, bootstrap and other CSS frameworks (only for survey-creator-js)*/
        *,
        ::after,
        ::before {
            box-sizing: border-box;
        }
  </style>
  <script src="../node_modules/survey-core/survey.core.js"></script>
  <script src="../node_modules/survey-core/survey.i18n.js"></script>
  <script src="../node_modules/survey-core/themes/index.js"></script>
  <script src="../node_modules/survey-creator-core/survey-creator-core.js"></script>
  <script src="../node_modules/survey-creator-core/survey-creator-core.i18n.js"></script>
  <script src="../node_modules/survey-js-ui/survey-js-ui.js"></script>
  <script src="../build/survey-creator-js.js"></script>
  <script src="./sc.js"></script>
  <script src="../node_modules/survey-creator-core/themes/index.js"></script>
</head>

<body spellcheck="false">
  <div id="survey-creator" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0;"></div>
</body>
<script>
  window.surveyJSFramework = "react";
  SurveyCreatorCore.registerSurveyTheme(SurveyTheme);
  SurveyCreatorCore.registerCreatorTheme(SurveyCreatorTheme);
  const creator = new SurveyCreator.SurveyCreator({ expandCollapseButtonVisibility: "never", showLogicTab: true, showTranslationTab: true });
  creator.tabResponsivenessMode = "menu";
  creator["animationEnabled"] = false;
  creator.showOneCategoryInPropertyGrid = true;
  creator.allowZoom = true;
  window.creator = creator;

  class SurveyCreatorRenderComponent extends SurveyUI.Component {
    constructor(props) {
      super(props);
      this.state = { creator: creator };
      window.updateCreatorModel = (options, json) => {
        window.prevCreator = window.creator;
        const creator = new SurveyCreator.SurveyCreator(options);
        creator.JSON = json;
        this.setState({ creator });
        creator.tabResponsivenessMode = "menu";
        creator["animationEnabled"] = false;
        creator.showOneCategoryInPropertyGrid = true;
        creator.allowZoom = true;
        window.creator = creator;
      }
    }
    render() {
      return SurveyUI.createElement(SurveyCreator.SurveyCreatorComponent, { creator: this.state.creator });
    }
  }
  // SurveyCreator.renderSurveyCreator(creator, document.getElementById("survey-creator"));
  const survey = SurveyUI.createElement(SurveyCreatorRenderComponent, { creator });
  SurveyUI.render(survey, document.getElementById("survey-creator"));
</script>

</html>